<template>
	<view>
		<uni-popup ref="open">
			<view class="bg-white radius padding-lg margin" style="width: 600rpx;">
				<view class="text-lg text-bold text-gray flex font-13 align-center">
					<view class="bg-pink round margin-right-xs " style="height: 24rpx;width: 24rpx;"></view>
					授权信息
				</view>
				<!-- 头像 -->
				<view class="juzhong margin-top-sm" style="position: relative;" v-if="user">

					<button open-type="chooseAvatar" class="round" @chooseavatar="chooseAvatarFn">
						<image :src="user.avatar||'/static/images/阳小妹.png'" style="width: 200rpx;height: 200rpx"
							class="round"></image>
						<view class="round text-sm"
							style="position: absolute;background-color:#c8c8c830;width: 200rpx;bottom: 0px;">
							更换头像
						</view>
					</button>


				</view>
				<view class="margin-top-lg" v-if="user">
					<uni-easyinput type="nickname" v-model="user.realName" @blur="onblur" placeholder="请输入昵称" />
				</view>
				<!-- 手机号 -->


				<view class="margin-top-lg flex justify-between" v-if="user">
					<!-- #ifdef H5 -->
					<uni-easyinput v-model="user.mobile" type="number" placeholder="请输入手机号码" />
					<!-- #endif -->

					<!-- #ifndef H5 -->
					<uni-easyinput v-model="user.mobile" placeholder="请输入手机号码" type="number" :disabled="true" />
					<button open-type="getPhoneNumber" class="round  bg-pink margin-left-sm cu-btn orderbutton shadow"
						@getphonenumber="onGetPhoneNumber">获取手机号</button>
					<!-- #endif -->

				</view>


				<!-- 按钮 -->
				<view class="margin-top-lg margin-bottom-sm">
					<button class="round  bg-pink  cu-btn orderbutton shadow" @click="submit(item)"
						style="width: 100%;">保存</button>
				</view>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	import {
		upload
	} from "@/api/system/upload/upload.js"

	import {
		getPhoneByWeChatCode
	} from "@/api/login.js"
	import {
		doUpdateMobileNameAvatar
	} from '@/api/system/user/userManagement'
	import {
		isNull
	} from "../../utils/validate";
	export default {
		name: "updatePhoneImage",
		data() {
			return {
				user: null,
				avatar: null,
			};
		},
		methods: {

			//获取手机号
			onGetPhoneNumber(e) {
				console.log(e.detail.code) // 动态令牌
				this.getPhoneByWeChatCode(e.detail.code)
			},

			onblur(e) {
				this.user.realName = e.detail.value
			},

			async getPhoneByWeChatCode(code) {
				let {
					data
				} = await getPhoneByWeChatCode({
					code: code
				})
				this.user.mobile = data.phoneNumber

			},
			async update() {
				this.user.email = "0@qq.com"
				await doUpdateMobileNameAvatar(this.user)
				this.$modal.msgSuccess("修改成功")
				this.loginSuccess()
			},

			chooseAvatarFn(e) {
				console.log(e);
				this.avatar = e.detail.avatarUrl

			},

			// 登录成功后，处理函数
			async loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.close()
				})
			},
			async submit(ref) {

				// if (this.user.avatar == null) {
				// 	this.$modal.msgError("请上传头像")
				// 	return
				// }
				// if (this.user.realName == null) {
				// 	this.$modal.msgError("请输入昵称")
				// 	return
				// }
				if (isNull(this.user.mobile)) {
					this.$modal.msgError("请获取手机号")
					return
				}
				this.user.email = "0@qq.com"
				console.log(this.user.avatar);
				console.log(this.avatar);

				if (!isNull(this.avatar)) {
					await this.updateImage()
				} else {
					this.update()
				}

			},

			open() {
				this.$refs.open.open()
				this.user = this.$store.state.user.user

				console.log(this.user);
			},
			close() {
				this.$refs.open.close()
			},
			// 头像
			async updateImage() {
				if (this.avatar.includes("https")) {
					this.user.avatar = this.avatar
					this.update()
					return
				}
				let {
					data
				} = await upload(this.avatar, "miniWeChatAvatar");
				this.avatar = data.fileStoragePath
				this.user.avatar = data.fileStoragePath

				await this.update()
			},
			// 手机号
			updatePhone() {
				uni.showModal({
					title: '提示',
					content: '确定要修改手机号吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

		}
	}
</script>

<style>

</style>